<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style include="md-select cr-shared-style">
:host {
  --cr-dialog-width: 704px;
}

/** Font styling */
p,
cr-button,
a {
  font-family: 'Roboto';
}

#title {
  font-family: 'Google Sans', 'Roboto';
}

#title,
#practiceTitle {
  font-size: 32px;
  font-weight: medium;
  line-height: 40px;
  margin-bottom: 16px;
}

#content {
  display: block;
  margin: auto;
  max-height: 400px;
  overflow: scroll;
  text-align: start
}

#content a,
#content p,
#practiceInstructions,
#practiceBody {
  font-size: 22px;
  font-weight: normal;
  line-height: 28px;
  margin-bottom: 16px;
  margin-top: 0;
  text-align: start
}

#content p,
#practiceInstructions,
#practiceBody {
  color: black;
}

/* Practice area */

#practiceTitle {
  font-family: 'Google Sans', 'Roboto';
}

#practiceInstructions {
  color: black;
}

#practiceBody {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow: auto;
}

#practiceContent * {
  display: block;
  margin-bottom: 8px;
  margin-top: 8px;
  text-align: start;
}

#practiceContent a {
  color: rgb(26, 115, 232);
}

#startPractice {
  margin-bottom: 32px;
  margin-inline-start: 0;
  margin-top: 16px;
}

#closePractice,
#startPractice {
  font-size: 16px;
  font-style: normal;
  font-weight: medium;
  line-height: 24px;
}

</style>

<div id="container" hidden>
  <template is="dom-if" if="[[ title ]]">
    <h1 id="title" tabindex="-1" aria-describedby="titleHint">
      [[ getMsg(title) ]]
    </h1>
    <div id="titleHint" hidden>
      [[ computeTitleDescription_() ]]
    </div>
  </template>
  <div id="content">
    <template id="contentTemplate" is="dom-repeat" items="[[ content ]]"
        as="text">
      <p tabindex="-1">[[ getMsg(text) ]]</p>
    </template>
  </div>
  <cr-dialog id="practice">
    <div id="practiceTitle" class="title" slot="title" tabindex="-1">
      [[ getMsg(practiceTitle) ]]
    </div>
    <div id="practiceBody" class="body" slot="body" tabindex="-1">
      <p id="practiceInstructions" tabindex="-1">
        [[ getMsg(practiceInstructions) ]]
      </p>
      <div id="practiceContent"></div>
    </div>
    <div class="button-container" slot="button-container">
      <cr-button id="closePractice" on-click="endPractice">
        [[ getMsg('tutorial_practice_area_close_button') ]]
      </cr-button>
    </div>
  </cr-dialog>
  <cr-button id="startPractice" on-click="startPractice"
      hidden$="[[ shouldHidePracticeButton() ]]">
    [[ getMsg('tutorial_practice_area_open_button') ]]
  </cr-button>
</div>
